<template>
  <div class="product">
      <!-- 产品导航栏 -->
      <ProductParam title="小米">
        <template v-slot:buy>
          <slot name='buy' >
              <div class="btn">立即购买</div>
          </slot>
        </template>
      </ProductParam>
      <div style="width:100%;height:1000px;backgroundColor:pink"></div>
      <!-- 产品广告 -->
      <!-- 轮播图 -->
      <!-- 视频 -->
      <div class="content">
        <div class="item-video">
          <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
          <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
          <div class="video-bg" @click="showSlide=true"></div>
          <div class="video-box" >
            <div class="overlay" v-show="showSlide"></div>
            <div class="video" :class="{'slide':showSlide}">
              <div class="icon-close" @click="showSlide=false"></div>
              <video src="/img/product/video.mp4" controls autoplay muted></video>
            </div>
          </div>
        </div>
      </div>
      
  </div>
</template>

<script>
import ProductParam from '../components/ProductParams' 
export default {
    components:{
     ProductParam
    },
    data(){
      return{
        showSlide:false,
        title:'小米'
      }
    },
    methods:{
       
    }
}
</script>

<style lang="scss">
  @import '../assets/css/mixin.scss';
  .product{
    .content{
      .item-bg{
        background:url('/img/product/product-bg-1.png') no-repeat center;
        height:718px;
        text-align:center;
        h2{
          font-size:80px;
          padding-top:55px;
        }
        h3{
          font-size:24px;
          letter-spacing: 10px;
        }
        p{
          margin-top:21px;
          margin-bottom:40px;
          a{
            font-size:16px;
            color:#333333;
          }
          span{
            margin:0 15px;
          }
        }
        .price{
          font-size:30px;
          color:#333333;
          em{
            font-style:normal;
            font-size:38px;
          }
        }
      }
      .item-bg-2{
        background:url('/img/product/product-bg-2.png') no-repeat center;
        height:480px;
        background-size:1226px 397px;
      }
      .item-bg-3{
        background:url('/img/product/product-bg-3.png') no-repeat center;
        height:638px;
        background-size:cover;
      }
      .item-swiper{
        margin:36px auto 52px;
        .desc{
          font-size:18px;
          color:#333333;
          text-align:center;
        }
        img{
          width:100%;
        }
      }
      .item-video{
        height:1044px;
        background-color:#070708;
        margin-bottom:76px;
        color:#FFFFFF;
        text-align:center;
        h2{
          font-size:60px;
          padding-top:82px;
          margin-bottom:47px;
        }
        p{
          font-size:24px;
          margin-bottom:58px;
        }
        .video-bg{
          background:url('/img/product/gallery-1.png') no-repeat center;
          background-size:cover;
          width:1226px;
          height:540px; 
          margin:0 auto 120px;
          cursor:pointer;
        }
        // to-do
        .video-box{
          .overlay{
            @include position(fixed);
            background-color: #333333;
            opacity: .4;
          }
          .video{
            @include position(fixed,50%,-50%,1000px,536px);
            transform: translate(-50%,-50%);
            opacity: 0;
            &.slide{
              top:50%;
              opacity: 1;
              transition: all 2s;
            }
            .icon-close{
              @include positionImg(absolute,20px,20px,20px,20px,'/img/icon-close.png');
              z-index: 50;
              cursor: pointer;
            }
            video{
              width: 100%;
              height: 100%;
              object-fit: cover; //填充整个盒子 但其他超过的部分会隐藏
              outline: none;
            }
          }

        }
        
      }
    }
    button{
      margin-left:10px;
    }
  }
</style>